<template>
  <div class="inform-container flex flex-row flex-nowrap">
    <div class="pd-30">
      <el-collapse v-model="activeId" accordion class="width-1000">
        <el-collapse-item v-for="(activity,index_activity) in activities" :key="activity.id" :title="'活动名：'+activity.title" :name="activity.id">
          <div v-for="(inform,index_inform) in activity.informs" :key="inform.id" class="col-centent">
            <span>{{ inform.title }}</span>
            <span class="pd-l-5">概述：{{ inform.overview }}</span>
            <el-button type="primary" size="mini" @click="showInformDetail(index_activity,index_inform)">详细</el-button>
            <el-button type="danger" size="mini" @click="delInform(inform.id)">删除</el-button>
          </div>
          <div v-if="activity.informs.length<1" class="ml-10">无通知</div>
        </el-collapse-item>
      </el-collapse>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-show="total>10"
          :page-size="limit"
          :current-page.sync="pageNo"
      ></el-pagination>
    </div>

    <InformDetail :activityIndex="displayedActivityIndex" :informIndex="displayedInformIndex"/>
  </div>
</template>

<script>
import {mapState} from "vuex";
import InformDetail from "@/views/activity/inform/InformDetail/InformDetail";

export default {
  name: "ActivityInform",
  components: {InformDetail},
  data() {
    return {
      activeId: null, // 折叠面板展开的活动的id
      pageNo: 1, // 分页器页数
      limit: 10, // 分页器每页行数
      displayedActivityIndex: null, // 右侧展示区需要的数据 用于从store里找到通知
      displayedInformIndex: null,
    }
  },
  mounted() {
    this.getActivities();
    this.$bus.$on('getInforms', this.getActivities)
  },
  beforeDestroy() {
    this.$bus.$off('getInforms')
  },
  methods: {
    getActivities() {
      this.$store.dispatch('activity/getActivities', {
        society_id: this.$store.getters.society_id,
        pageNo: this.pageNo,
        limit: this.limit,
        onlyNotExpired: true,
        needInforms: true
      })
    },
    showInformDetail(index_activity, index_inform) {
      this.displayedActivityIndex = index_activity;
      this.displayedInformIndex = index_inform;
    },
    delInform(id) {
      this.$store.dispatch('activity/deleteInform',id).then(()=>{
        this.$message.success('删除成功');
        this.getActivities();
      })
    }
  },
  computed: {
    ...mapState('activity', ['activities', 'total']),
  },
  watch: {
    pageNo() {
      this.getActivities();
    }
  }
}
</script>

<style scoped lang="scss">
.inform-container {
  height: calc(100vh - 50px);
}

.col-centent {
  border-bottom: 1px #b2b2b2 solid;
  padding: 5px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  span {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 5px;
    border-right: 1px solid #1f2d3d;
  }
}
</style>
